<template>
  <div>
    <div class="find-container">
      <div class="title">
        <van-nav-bar title="发现" />
      </div>
      <!-- 面试技巧模块 -->
      <div class="technic">
        <van-cell
          title="面试技巧"
          is-link
          value="查看更多"
          @click="$router.push({ path: '/article' })"
        />
        <van-row
          class="content"
          v-for="(item, index) in technicList"
          :key="item.id"
        >
          <van-col span="17"
            ><div class="left">
              <p
                @click="
                  $router.push({ path: '/details', query: { id: item.id } })
                "
              >
                {{ item.title }}
              </p>
              <div class="bottom">
                <span class="time">{{ item.updated_at | technicTime }}</span>
                <span class="watch"
                  ><van-icon name="browsing-history-o" />{{ item.read }}</span
                >
                <span
                  :class="{ star: true, iconColor: star }"
                  @click="onStar(index)"
                  ><van-icon name="good-job-o" />{{ item.star }}</span
                >
              </div>
            </div></van-col
          >
          <van-col span="7"
            ><div class="right">
              <van-image
                width="100%"
                height="100%"
                :src="`http://119.91.151.46:1337${item.cover}`"
                radius="10%"
                fit="cover"
              /></div
          ></van-col>
        </van-row>
      </div>
      <!-- 市场数据模块 -->
      <div class="MarketData">
        <!-- 头部模块 -->
        <van-cell
          title="市场数据"
          is-link
          value="查看更多"
          @click="$router.push({ path: '/chart' })"
        />
        <!-- tag标签模块 -->
        <div class="mytag">
          <van-tag color="#eceaea" class="tag" size="large">{{
            hotData.city
          }}</van-tag>
          <van-tag color="#eceaea" class="tag" size="large">{{
            hotData.position
          }}</van-tag>
        </div>
        <!-- 进度条模块 -->
        <div class="myProgress">
          <div class="content1" v-show="ProgressShow1">
            <div style="height:116px; overflow: hidden;">
              <div
                class="Progress"
                v-for="(item, index) in hotData.yearSalary"
                :key="index"
              >
                <span class="time">{{ item.year }}</span>
                <div class="box1">
                  <div
                    class="box2"
                    :style="{
                      width: `${(item.salary / hotData.topSalary) * 100}%`
                    }"
                  >
                    <i>￥{{ item.salary }}</i>
                  </div>
                </div>
                <span class="icon" v-show="item.percent"
                  ><img
                    :src="
                      item.percent > 0
                        ? 'https://img02.mockplus.cn/idoc/sketch/2020-09-10/7c58537d-1645-4fec-bd33-7bec566f1a69.3750B820-E5FA-476B-82CE-6E05E71FF960.png'
                        : 'https://img02.mockplus.cn/idoc/sketch/2020-09-10/f3055e32-9e30-4f43-bfc7-c90397dc4d64.B24FA884-A8D1-4B8B-BB9A-0688CAECF085.png'
                    "
                    alt=""
                  />{{ item.percent }}%</span
                >
              </div>
            </div>
            <div class="more" @click="more1">
              展开更多<van-icon name="arrow-down" />
            </div>
          </div>
          <div class="content2" v-show="ProgressShow2">
            <div
              class="Progress"
              v-for="(item, index) in hotData.yearSalary"
              :key="index"
            >
              <span class="time">{{ item.year }}</span>
              <div class="box1">
                <div
                  class="box2"
                  :style="{
                    width: `${(item.salary / hotData.topSalary) * 100}%`
                  }"
                >
                  <i>￥{{ item.salary }}</i>
                </div>
              </div>
              <span class="icon" v-show="item.percent"
                ><img
                  :src="
                    item.percent > 0
                      ? 'https://img02.mockplus.cn/idoc/sketch/2020-09-10/7c58537d-1645-4fec-bd33-7bec566f1a69.3750B820-E5FA-476B-82CE-6E05E71FF960.png'
                      : 'https://img02.mockplus.cn/idoc/sketch/2020-09-10/f3055e32-9e30-4f43-bfc7-c90397dc4d64.B24FA884-A8D1-4B8B-BB9A-0688CAECF085.png'
                  "
                  alt=""
                />{{ item.percent }}%</span
              >
            </div>
            <div class="more" @click="more2">
              收起列表<van-icon name="arrow-up" />
            </div>
          </div>
        </div>
      </div>
      <!-- 面经模块 -->
      <div class="experience">
        <van-cell
          title="面经分享"
          is-link
          value="查看更多"
          @click="$router.push({ path: '/shareList' })"
        />
        <div class="expList">
          <van-list>
            <van-cell v-for="item in expList" :key="item.id">
              <div class="content">
                <!-- 跳转到面经详情页 -->
                <div
                  @click="
                    $router.push({
                      path: '/shareDetail',
                      query: { id: item.id }
                    })
                  "
                >
                  <div class="title">{{ item.title }}</div>
                  <div class="text">
                    {{ item.content }}
                  </div>
                </div>
                <div class="bottom">
                  <van-row>
                    <van-col class="img" span="8"
                      ><van-image
                        width="22"
                        height="22"
                        round
                        :src="`http://119.91.151.46:1337${item.author.avatar}`"
                      />
                      <span class="name">{{
                        item.author.nickname
                      }}</span></van-col
                    >
                    <van-col span="6">{{
                      item.updated_at | technicTime
                    }}</van-col>
                    <van-col span="5"
                      ><van-icon name="chat-o" />{{
                        item.article_comments
                      }}</van-col
                    >
                    <van-col span="5"
                      ><van-icon name="good-job-o" />{{ item.share }}</van-col
                    >
                  </van-row>
                </div>
              </div>
            </van-cell>
          </van-list>
        </div>
      </div>
      <div class="findBottom">
        ------到底了------
      </div>
    </div>
  </div>
</template>

<script>
import { getTechnicListAPI, getShareListAPI, getHotAPI } from '@/api'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  data () {
    return {
      technicList: [],
      ProgressShow1: true,
      ProgressShow2: false,
      expList: [],
      // 点赞
      star: false,
      starList: [],
      // 热门数据
      hotData: {}
    }
  },
  async created () {
    // 获取面试技巧列表
    const res = await getTechnicListAPI({ limit: 3 })
    // console.log(res)
    this.technicList = res.data.data.list
    // 获取面经列表
    const expList = await getShareListAPI({ limit: 3 })
    // console.log(expList)
    this.expList = expList.data.data.list
    // 获取热门数据
    const hotData = await getHotAPI()
    // console.log(hotData)
    this.hotData = hotData.data.data
  },
  methods: {
    more1 () {
      this.ProgressShow1 = false
      this.ProgressShow2 = true
    },
    more2 () {
      this.ProgressShow2 = false
      this.ProgressShow1 = true
    },
    // 点赞
    onStar (index) {
      this.starList.push(this.technicList[index])

      if (this.star === false) {
        this.star = true
        this.technicList[index].star += 1
      } else {
        this.star = false
        this.technicList[index].star -= 1
      }
    }
  },
  filters: {
    // 面试技巧模块发布时间过滤器
    technicTime: function (value) {
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less" scoped>
.find-container {
  background-color: #f7f4f5;
  .van-icon {
    margin-right: 5px;
  }
  // 标题
  .title {
    .van-nav-bar__title.van-ellipsis {
      font-size: 18px;
      color: #222222;
    }
  }
  // 面试技巧模块
  .technic {
    background-color: #fff;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-top: 6px;
    .van-cell {
      font-size: 14px;
    }
    .van-icon {
      margin-left: 5px;
    }
    .content {
      display: flex;
      justify-content: space-between;
      margin: 20px 10px;
      height: 75px;
      font-size: 16px;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .time {
          display: inline-block;
          width: 130px;
        }
        .watch {
          display: inline-block;
          width: 80px;
        }
        p {
          margin-top: 0;
          font-size: 16px;
        }
        .bottom {
          font-size: 12px;
          margin-bottom: 4px;
          color: #b4b4bd;
        }
      }
      .right {
        height: 100%;
        width: 100%;
        overflow: hidden;
        border-radius: 5px;
        margin-right: 10px;
      }
    }
  }
  // 市场数据模块
  .MarketData {
    background-color: #fff;
    margin-top: 5px 10px;
    // height: 300px;
    // tag标签模块
    .mytag {
      .tag {
        margin: 10px;
        color: #1e1e1e;
      }
    }
    //  进度条模块
    .myProgress {
      margin-top: 10px;
      .Progress {
        display: flex;
        align-items: center;
        height: 20px;
        line-height: 20px;
        line-height: 20px;
        margin: 15px 0;
        .time {
          overflow: hidden;
          display: inline-block;
          margin: 0 10px;
          height: 20px;
          line-height: 20px;
          width: 50px;
          font-size: 14px;
          color: #545671;
        }
        .box1 {
          position: relative;
          display: inline-block;
          vertical-align: middle;
          border-radius: 6px;
          height: 12px;
          width: 218px;
          font-size: 14px;
          color: #fff;
          background: #ebdfdf;
        }
        .icon {
          img {
            width: 18px;
            height: 18px;
          }
        }
        .box2 {
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 6px;
          display: inline-block;
          vertical-align: middle;
          height: 12px;
          line-height: 12px;
          width: 150px;
          font-size: 14px;
          color: #fff;
          background: #fe6d67;
          i {
            position: absolute;
            top: 10%;
            right: 5px;
          }
        }
        .icon {
          font-size: 14px;
          margin-left: 8px;
          color: #5b5d75;
        }
      }
      .more {
        text-align: center;
        margin: 10px 0;
        color: #545671;
        font-size: 14px;
      }
    }
  }
  // 导航栏左边样式
  .van-cell__title {
    color: #222222;
    font-size: 16px;
  }
  // 面经分享
  .experience {
    margin-top: 10px;
    .content {
      .title {
        padding-top: 10px;
        font-size: 16px;
        color: #181a39;
      }
      .text {
        height: 50px;
        text-overflow: ellipsis;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #545671;
        font-size: 13px;
      }
      .bottom {
        font-size: 12px;
        margin-bottom: 4px;
        .van-row {
          height: 22px;
          line-height: 22px;
          color: #b4b4bd;
        }
        .name {
          color: #545671;
        }
        .van-image.van-image--round {
          margin-right: 5px;
        }
        .img {
          display: flex;
        }
      }
    }
  }
  .findBottom {
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #b4b4bd;
    font-size: 14px;
  }
  //  点赞颜色
  .iconColor {
    color: red;
  }
}
</style>
